.popup{
    width: 100%;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba($color-black,.8);
    z-index: 9999;

    opacity: 0;
    visibility: hidden;
    transition: all .3s;

    @supports(-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)){
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
        background-color: rgba($color-black,.3);
    }

    &__content{
        @include absCenter;
        width: 75%;
        // height: 50rem;
        background-color: $color-white;
        box-shadow: 0 2rem 4rem rgba($color-black,.2);
        border-radius: 5px;
        display: table;
        overflow: hidden;
        opacity: 0;
        transform: translate(-50%,-50%) scale(0.25);
        transition: all .5s .2s;
    }

    &__left{
        width: 33.3333%;
        display: table-cell;
        // float: left;

    }

    &__right{
        width: 66.6667%;
        display: table-cell;
        vertical-align: middle;
        padding: 3rem 5rem;
    }
    &__img{
        display: block;
        width: 100%;


    }
    &__text{
        font-size:1.4rem ;
        margin-bottom: 4rem;

        -moz-column-count: 2;
        -webkit-column-count: 2;
        column-count: 2;

        -moz-column-gap: 4rem;//1em=14px
        -webkit-column-gap: 4rem;//1em=14px
        column-gap: 4rem;//1em=14px

        -moz-column-rule: 1px solid $color-grey-light-2;
        -webkit-column-rule: 1px solid $color-grey-light-2;
        column-rule: 1px solid $color-grey-light-2;

        -moz-hyphens: auto;
        -webkit-hyphens: auto;
        hyphens: auto;
    }

    //open states
    &:target{
        opacity: 1;
        visibility: visible;
    }
    &:target &__content{
        opacity: 1;
        transform: translate(-50%,-50%) scale(1);

    }
    &__close{
        &:link,
        &:visited{
            color:$color-grey-dark;
            position: absolute;
            top: 2.5rem;
            right: 2.5rem;
            font-size: 3rem;
            text-decoration: none;
            display: inline-block;
            transition: all .2s;
            line-height: 1;
        }
        &:hover{
            color:$color-primary;
        }
    }


}